import{d as t,M as n,A as r,h as i}from"./Anchors-CRD96j4l.js";import{D as c,a as d}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const s={path:"/nav/dropdown",name:"dropdown",title:"Dropdown 下拉菜单"};function o(l){const e={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...l.components};return n(i,{children:[n("div",{class:"sys-ctx-main-left",children:[n(e.h1,{id:"sp-",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:t(e.span,{className:"icon icon-link"})}),s.title]}),n(e.h2,{id:"sp-demos",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:t(e.span,{className:"icon icon-link"})}),"代码演示 "]}),t(c,{columns:2}),t(d,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Dropdown, DropdownItem, DropdownMenu, Icon, Text } from "cui-solid"

export default () => {
    return <Dropdown align="bottomLeft" menu={<DropdownMenu>
        <DropdownItem>驴打滚</DropdownItem>
        <DropdownItem>炸酱面</DropdownItem>
        <DropdownItem disabled>豆汁儿</DropdownItem>
        <DropdownItem divided>北京烤鸭<Icon name="chevron-right" />
            <DropdownMenu>
                <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                <DropdownItem>焖炉烤鸭</DropdownItem>
            </DropdownMenu>
        </DropdownItem>
    </DropdownMenu>} onSelect={(name: string) => {
        console.log(name);
    }}>
        <Text>下拉菜单</Text>
    </Dropdown>
}`,scopes:void 0,children:n(e.p,{children:["需要配合 ",t(e.code,{className:"sp-inline-code",children:"DropdownMenu"})," 和 ",t(e.code,{className:"sp-inline-code",children:"DropdownItem"})," 两个组件来使用。",t(e.br,{}),`
`,"选中菜单项触发 ",t(e.code,{className:"sp-inline-code",children:"onSelect"})," 事件"]})}),t(d,{id:"trigger",title:"触发条件",src:"2trigger.demo.tsx",code:`import { Button, Dropdown, DropdownItem, DropdownMenu, Icon, Space, Text } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const [visible, setVisible] = createSignal(false);

    return <Space dir="h">
        <Dropdown trigger="click" align="bottomLeft" menu={<DropdownMenu>
            <DropdownItem>驴打滚</DropdownItem>
            <DropdownItem>炸酱面</DropdownItem>
            <DropdownItem disabled>豆汁儿</DropdownItem>
            <DropdownItem divided>北京烤鸭<Icon name="chevron-right" />
                <DropdownMenu>
                    <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                    <DropdownItem>焖炉烤鸭</DropdownItem>
                </DropdownMenu>
            </DropdownItem>
        </DropdownMenu>} onSelect={(name: string) => {
            console.log(name);
        }}>
            <Text>Click</Text>
        </Dropdown>



        <Dropdown trigger="contextMenu" align="bottomLeft" menu={<DropdownMenu>
            <DropdownItem>驴打滚</DropdownItem>
            <DropdownItem>炸酱面</DropdownItem>
            <DropdownItem disabled>豆汁儿</DropdownItem>
            <DropdownItem divided>北京烤鸭<Icon name="chevron-right" />
                <DropdownMenu>
                    <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                    <DropdownItem>焖炉烤鸭</DropdownItem>
                </DropdownMenu>
            </DropdownItem>
        </DropdownMenu>} onSelect={(name: string) => {
            console.log(name);
        }}>
            <Text>rightClick</Text>
        </Dropdown>


        <Dropdown trigger="custom" align="bottom"
            visible={[visible, setVisible]}
            menu={<div style={{width: '150px', padding: '20px', background: '#fff'}}>
                <div>dropdown内容</div>
                <Button type="primary" onClick={() => {
                    setVisible(false)
                }}>关闭</Button>
            </div>} onSelect={(name: string) => {
                console.log(name);
            }}>
            <Text>custom</Text>
        </Dropdown>
    </Space>
}`,scopes:void 0,children:n(e.p,{children:["通过设置属性 ",t(e.code,{className:"sp-inline-code",children:"trigger"})," 可以更改触发方式，可选项为 ",t(e.code,{className:"sp-inline-code",children:"click"})," 、 ",t(e.code,{className:"sp-inline-code",children:"hover"}),"(默认)、 ",t(e.code,{className:"sp-inline-code",children:"contextMenu"})," 或 ",t(e.code,{className:"sp-inline-code",children:"custom"}),"(自定义)。",t(e.br,{}),`
`,"触发方式设置为 ",t(e.code,{className:"sp-inline-code",children:"custom"})," 自定义时，需手动设置 ",t(e.code,{className:"sp-inline-code",children:"visible"})," 属性来控制下拉框的显示。"]})}),t(d,{id:"theme",title:"主题",src:"3theme.demo.tsx",code:`import { Dropdown, DropdownItem, DropdownMenu, Icon, Text } from "cui-solid"

export default () => {
    return <Dropdown theme="dark" trigger="click" align="bottomLeft" menu={<DropdownMenu>
        <DropdownItem>驴打滚</DropdownItem>
        <DropdownItem>炸酱面</DropdownItem>
        <DropdownItem disabled>豆汁儿</DropdownItem>
        <DropdownItem divided>北京烤鸭<Icon name="chevron-right" />
            <DropdownMenu>
                <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                <DropdownItem>焖炉烤鸭</DropdownItem>
            </DropdownMenu>
        </DropdownItem>
    </DropdownMenu>} onSelect={(name: string) => {
        console.log(name);
    }}>
        <Text>暗色菜单</Text>
    </Dropdown>
}`,scopes:void 0,children:n(e.p,{children:["通过 ",t(e.code,{className:"sp-inline-code",children:"theme"})," 属性可以设置暗色下拉菜单 ",t(e.code,{className:"sp-inline-code",children:"dark"}),"。"]})}),t(d,{id:"transfer",title:"Transfer",src:"4transfer.demo.tsx",code:`import { Dropdown, DropdownItem, DropdownMenu, Icon, Text } from "cui-solid"

export default () => {
    return <Dropdown transfer trigger="click" align="bottomLeft" menu={<DropdownMenu>
        <DropdownItem>驴打滚</DropdownItem>
        <DropdownItem>炸酱面</DropdownItem>
        <DropdownItem disabled>豆汁儿</DropdownItem>
        <DropdownItem divided>北京烤鸭<Icon name="chevron-right" />
            <DropdownMenu>
                <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                <DropdownItem>焖炉烤鸭</DropdownItem>
            </DropdownMenu>
        </DropdownItem>
    </DropdownMenu>} onSelect={(name: string) => {
        console.log(name);
    }}>
        <Text>下拉菜单</Text>
    </Dropdown>
}`,scopes:void 0,children:n(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"transfer"})," 属性可以让下拉菜单渲染到Body节点下"]})}),t(d,{id:"align",title:"位置",src:"5align.demo.tsx",code:`import { Dropdown, DropdownItem, DropdownMenu, Icon, Space, Text } from "cui-solid"

export default () => {
    return <Space dir="h">
        <Dropdown trigger="click" align="rightTop" menu={<DropdownMenu>
            <DropdownItem>驴打滚</DropdownItem>
            <DropdownItem>炸酱面</DropdownItem>
            <DropdownItem disabled>豆汁儿</DropdownItem>
            <DropdownItem divided>北京烤鸭<Icon name="chevron-right" />
                <DropdownMenu>
                    <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                    <DropdownItem>焖炉烤鸭</DropdownItem>
                </DropdownMenu>
            </DropdownItem>
        </DropdownMenu>} onSelect={(name: string) => {
            console.log(name);
        }}>
            <Text>右侧</Text>
        </Dropdown>

        <Dropdown trigger="click" align="bottomRight" menu={<DropdownMenu>
            <DropdownItem>驴打滚</DropdownItem>
            <DropdownItem>炸酱面</DropdownItem>
            <DropdownItem disabled>豆汁儿</DropdownItem>
            <DropdownItem divided>北京烤鸭<Icon name="chevron-right" />
                <DropdownMenu>
                    <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                    <DropdownItem>焖炉烤鸭</DropdownItem>
                </DropdownMenu>
            </DropdownItem>
        </DropdownMenu>} onSelect={(name: string) => {
            console.log(name);
        }}>
            <Text>右下侧</Text>
        </Dropdown>
    </Space>
}`,scopes:void 0,children:n(e.p,{children:[t(e.code,{className:"sp-inline-code",children:"align"})," 属性支持12个方位， 最常用的是 ",t(e.code,{className:"sp-inline-code",children:"bottom"}),"/",t(e.code,{className:"sp-inline-code",children:"bottomLeft"}),"/",t(e.code,{className:"sp-inline-code",children:"bottomRight"}),", 默认为 ",t(e.code,{className:"sp-inline-code",children:"bottom"})]})}),t(d,{id:"disabled",title:"禁用",src:"6disabled.demo.tsx",code:`import { Dropdown, DropdownItem, DropdownMenu, Icon, Text } from "cui-solid"

export default () => {
    return <Dropdown disabled trigger="click" align="bottomLeft" menu={<DropdownMenu>
        <DropdownItem>驴打滚</DropdownItem>
        <DropdownItem>炸酱面</DropdownItem>
        <DropdownItem disabled>豆汁儿</DropdownItem>
        <DropdownItem divided>北京烤鸭<Icon name="chevron-right" />
            <DropdownMenu>
                <DropdownItem name="挂炉烤鸭">挂炉烤鸭</DropdownItem>
                <DropdownItem>焖炉烤鸭</DropdownItem>
            </DropdownMenu>
        </DropdownItem>
    </DropdownMenu>} onSelect={(name: string) => {
        console.log(name);
    }}>
        <Text>下拉菜单</Text>
    </Dropdown>
}`,scopes:void 0,children:n(e.p,{children:["设置 ",t(e.code,{className:"sp-inline-code",children:"disabled"})," 属性可以禁用菜单"]})}),n(e.h2,{id:"props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:t(e.span,{className:"icon icon-link"})}),"属性 "]}),n(e.table,{className:"sp-table",children:[t(e.thead,{children:n(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),n(e.tbody,{children:[n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"trigger"}),t(e.td,{style:{textAlign:"left"},children:"触发方式"}),t(e.td,{style:{textAlign:"left"},children:"hover | click | contextMenu | custom"}),t(e.td,{style:{textAlign:"left"},children:"hover"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"handler"}),t(e.td,{style:{textAlign:"left"},children:"触发事件的元素"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"align"}),t(e.td,{style:{textAlign:"left"},children:"触发方式"}),t(e.td,{style:{textAlign:"left"},children:"bottom | bottomLeft | bottomRight | right | left | rightTop | leftTop"}),t(e.td,{style:{textAlign:"left"},children:"bottom"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"menu"}),t(e.td,{style:{textAlign:"left"},children:"下拉菜单内容"}),t(e.td,{style:{textAlign:"left"},children:"any"}),t(e.td,{style:{textAlign:"left"}})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"visible"}),t(e.td,{style:{textAlign:"left"},children:"菜单显隐绑定属性"}),t(e.td,{style:{textAlign:"left"},children:"Signal"}),t(e.td,{style:{textAlign:"left"}})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"transfer"}),t(e.td,{style:{textAlign:"left"},children:"是否将弹层放置于 body 内，在overflow 为 hidden的容器内效果更友好"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"fixWidth"}),t(e.td,{style:{textAlign:"left"},children:"是否在使用transfer时打开弹框后弹框固定宽度至出发元素宽度，在select中使用"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"theme"}),t(e.td,{style:{textAlign:"left"},children:"主题色"}),t(e.td,{style:{textAlign:"left"},children:"dark | light"}),t(e.td,{style:{textAlign:"left"},children:"light"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"disabled"}),t(e.td,{style:{textAlign:"left"},children:"禁用状态"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"revers"}),t(e.td,{style:{textAlign:"left"},children:"超出范围反向显示"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"onSelect"}),t(e.td,{style:{textAlign:"left"},children:"选择菜单项选中事件"}),t(e.td,{style:{textAlign:"left"},children:"Function"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),n(e.h2,{id:"item_props",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#item_props",children:t(e.span,{className:"icon icon-link"})}),"Item属性 "]}),n(e.table,{className:"sp-table",children:[t(e.thead,{children:n(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"属性"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"类型"}),t(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),n(e.tbody,{children:[n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"classList"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"class"}),t(e.td,{style:{textAlign:"left"},children:"自定义class"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"},children:"-"})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"style"}),t(e.td,{style:{textAlign:"left"},children:"自定义样式"}),t(e.td,{style:{textAlign:"left"},children:"Object"}),t(e.td,{style:{textAlign:"left"}})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"disabled"}),t(e.td,{style:{textAlign:"left"},children:"禁用状态"}),t(e.td,{style:{textAlign:"left"},children:"boolean"}),t(e.td,{style:{textAlign:"left"}})]}),n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:"name"}),t(e.td,{style:{textAlign:"left"},children:"菜单项名称"}),t(e.td,{style:{textAlign:"left"},children:"string"}),t(e.td,{style:{textAlign:"left"}})]})]})]}),n(e.h2,{id:"events",children:[t(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#events",children:t(e.span,{className:"icon icon-link"})}),"事件 "]}),n(e.table,{className:"sp-table",children:[t(e.thead,{children:n(e.tr,{children:[t(e.th,{style:{textAlign:"left"},children:"事件名称"}),t(e.th,{style:{textAlign:"left"},children:"说明"}),t(e.th,{style:{textAlign:"left"},children:"返回值"})]})}),t(e.tbody,{children:n(e.tr,{children:[t(e.td,{style:{textAlign:"left"},children:t(e.code,{className:"sp-inline-code",children:"OnSelect"})}),t(e.td,{style:{textAlign:"left"},children:"选择菜单项选中事件"}),t(e.td,{style:{textAlign:"left"},children:"name:菜单项名称"})]})})]})]}),`
`,`
`,`
`,t(r,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"trigger",title:"触发条件",src:"2trigger.demo.tsx"},{id:"theme",title:"主题",src:"3theme.demo.tsx"},{id:"transfer",title:"Transfer",src:"4transfer.demo.tsx"},{id:"align",title:"位置",src:"5align.demo.tsx"},{id:"disabled",title:"禁用",src:"6disabled.demo.tsx"},{id:"props",depth:2,title:"属性"},{id:"item_props",depth:2,title:"Item属性"},{id:"events",depth:2,title:"事件"}]})]})}function a(l={}){const{wrapper:e}=l.components||{};return e?t(e,{...l,children:t(o,{...l})}):o(l)}export{a as default,s as frontmatter};
